<template>
  <div class="thiscontainer">
    <div class="content">
      <el-form size="mini" :model="dataForm" :rules="rules" ref="vendorRuleForm">
        <el-row>
          <el-col :span="24">
            <el-form-item :label-width="formLabelWidth" label="关于荟日：" prop="about_us">
              <tinymce :height="500" v-model="dataForm.about_us" v-if="drawer_tinymce" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item :label-width="formLabelWidth" label="公众号二维码：" prop="qr_code">
              <el-upload :before-upload="beforeAvatarUpload" :http-request="UploadImage" :limit="9" :on-remove="handleRemove" :on-success="handleAvatarSuccess" :show-file-list="false" accept="image/jpeg,image/jpg,image/png" action="string" class="avatar-uploader avatar-uploadermine">
                <img :src="dataForm.qr_code" class="avatar" v-if="dataForm.qr_code" />
                <i class="el-icon-plus avatar-uploader-icon" v-else></i>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item :label-width="formLabelWidth" label="联系电话：" prop="tel">
              <el-input autocomplete="off" type="text" v-model="dataForm.tel"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item :label-width="formLabelWidth" label="地址：" prop="address">
              <el-input autocomplete="off" type="text" v-model="dataForm.address"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item :label-width="formLabelWidth" label="官网地址：" prop="website_url">
              <el-input autocomplete="off" type="text" v-model="dataForm.website_url"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item :label-width="formLabelWidth" label="坐标经纬度：" prop="lat_longitude">
              <el-input autocomplete="off" type="text" v-model="dataForm.lat_longitude" placeholder="示例：114.447699,38.022214"></el-input>
              <el-button size="mini" @click="getLatLongitude">点击获取经纬度</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="demo-drawer__footer">
      <el-button size="mini" @click="cancelForm">取消</el-button>
      <el-button size="mini" :loading="loading" @click="dataFormSubmit" type="primary">保存</el-button>
    </div>
  </div>
</template>
<script>
import Tinymce from '@/components/Tinymce'
import { GetWebSiteInfoApi, ModifyWebsiteInfoApi, upfile } from '../../../api/baseInfo'
export default {
  components: { Tinymce },
  data() {
    return {
      dataForm: {
        website_url: '',
        lat_longitude: '',
        address: '',
        tel: '',
        about_us: '',
        qr_code: '',
        id: '',
      },
      text: '',
      loading: false,
      rowData: null,
      drawer_tinymce: false,
      formLabelWidth: '120px',
      rules: {
        website_url: [{ required: true, message: '请填写官网地址', trigger: 'blur' }],
        lat_longitude: [{ required: true, message: '请填写坐标经纬度', trigger: 'blur' }],
        address: [{ required: true, message: '请填写详细地址', trigger: 'blur' }],
        tel: [{ required: true, message: '请填写联系电话', trigger: 'blur' }],
        about_us: [{ required: true, message: '请填写关于荟日', trigger: 'blur' }],
        qr_code: [{ required: true, message: '请上传公众号二维码', trigger: 'blur' }],
      },
    }
  },
  destroyed() {
    this.dataForm.about_us = ''
    this.drawer_tinymce = false
  },
  mounted() {
    // this.tinymce_init();
    this.getInitInfo()
  },
  methods: {
    editorValChangHandle(about_us) {
      this.dataForm.about_us = about_us
    },
    getInitInfo() {
      GetWebSiteInfoApi({}).then((res) => {
        if (res.code == 200) {
          this.dataForm = res.result
          this.text = this.dataForm.about_us
          this.drawer_tinymce = true
        }
      })
    },
    cancelForm() {
      this.$router.go(-1)
    },
    getLatLongitude() {
      var url = 'http://api.map.baidu.com/lbsapi/getpoint/index.html'
      window.open(url, '_blank')
    },
    dataFormSubmit() {
      this.$refs.vendorRuleForm.validate((flag) => {
        if (flag) {
          this.loading = true
          const data = this.dataForm
          ModifyWebsiteInfoApi(data).then((res) => {
            if (res.code == 200) {
              this.getInitInfo()
              this.$message.success('保存成功')
            }
            this.loading = false
          })
        }
      })
    },
    tinymce_init() {
      this.drawer_tinymce = false
      this.drawer_tinymce = true
    },
    UploadImage(param) {
      let _this = this
      const formData = new FormData()
      formData.append('file', param.file)
      upfile(formData)
        .then((res) => {
          if (res.code == 200) {
            _this.dataForm.qr_code = res.result
            param.onSuccess()
          }
        })
        .catch((response) => {
          param.onError()
        })
    },
    handleRemove(file, fileList) {
      this.dataForm.qr_code = ''
    },
    handleAvatarSuccess(res, file) {},
    beforeAvatarUpload(file) {
      // 可在此进行图片大小限制
      const isLt2M = file.size / 1024 / 1024 < 5
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过5MB!')
      }
      return isLt2M
    },
  },
}
</script>

<style lang="scss" scoped>
.demo-drawer__footer {
  margin-bottom: 6%;
}
.content {
  width: 1100px;
  margin-top: 3%;
  margin-left: 3%;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

.thiscontainer {
}
</style>
